<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bootstrappin'</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Main Style Sheet -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Modernizr -->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <!-- Respond.js for IE 8 or less only -->
    <!--[if (lt IE 9) & (!IEMobile)]>
        <script src="js/vendor/respond.min.js"></script>
    <![endif]-->

</head>
<body class="products">

<!--[if lte IE 7]>
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->

<header role="banner">
  <div class="container">
    <a class="banner-brand visible-md visible-lg" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="180"></a>
    <div class="utility-nav">
      <ul>
        <li><a href="#" title="Login or Register"><i class="icon fa fa-user fa-lg"></i> <span>Log In or Register</span></a></li>
        <li><a href="#" title="View Cart"><i class="icon fa fa-shopping-cart fa-lg"></i> <span>View Cart</span></a></li>
      </ul>
    </div><!-- /.utility-nav -->
  </div><!-- /.container -->
    <nav role="navigation" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand visible-xs visible-sm" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120"></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clothing <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Accessories <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Men <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kids <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">All Departments <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div><!--/.container -->
    </nav>
</header>

<main role="main">
  <div class="container">

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Parent Category</a></li>
      <li>Current Category</li>
    </ul>

    <h1>Product Category Name</h1>

    <div class="row">
      <div class="grid-options col-sm-3">

        <h2>Narrow your selection</h2>

        <a class="choose-clearance" href="#">
          <h3>Clearance Sale</h3>
          <p>View clearance items</p>
        </a>

        <h3>Categories</h3>
        <ul class="options-list options-categories">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

        <h3>Brands</h3>
        <ul class="options-list options-brands">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

        <h3>Another Filter</h3>
        <ul class="options-list options-other">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
          <li><a href="#">Option 6</a></li>
          <li><a href="#">Option 7</a></li>
          <li><a href="#">Option 8</a></li>
          <li><a href="#">Option 9</a></li>
          <li><a href="#">Option 10</a></li>
        </ul>

      </div><!-- /.products-grid-options -->
      <div class="products-grid col-sm-9">
        <div class="row">
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Exceptional Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Even Longer Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
          <div class="product-item col-sm-4">
            <a href="#"><img src="holder.js/300x200/auto" alt="sample product" /></a>
            <h2><a href="#">Product Title</a></h2>
            <p>This text describes the above product a little not too much but just enough or maybe a little more</p>
            <a class="btn btn-default btn-xs pull-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div><!-- /.row -->

            <ul>
              <li><a href="#"><span class="fa fa-chevron-left"></span> Prev</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">Next <span class="fa fa-chevron-right"></span></a></li>
            </ul>
          </div><!-- /.products-grid -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </main>
    <footer role="contentinfo">
      <div class="container">
        <div class="row">

            <div class="col-sm-4 col-md-2">
              <h3>Categories</h3>
              <ul>
                <li><a href="#">Shoes</a></li>
                <li><a href="#">Clothing</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Men</a></li>
                <li><a href="#">Women</a></li>
                <li><a href="#">Kids</a></li>
                <li><a href="#">Pets</a></li>
              </ul>
            </div>
            <div class="col-sm-4 col-md-2">
              <h3>Styles</h3>
              <ul>
                <li><a href="#">Athletic</a>  </li>
                <li><a href="#">Casual</a></li>
                <li><a href="#">Dress</a></li>
                <li><a href="#">Everyday</a></li>
                <li><a href="#">Other Days</a></li>
                <li><a href="#">Alternative</a></li>
                <li><a href="#">Otherwise</a></li>
              </ul>
            </div>
            <div class="col-sm-4 col-md-2">
              <h3>Other</h3>
              <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Another link</a></li>
                <li><a href="#">Link again</a></li>
                <li><a href="#">Try this</a></li>
                <li><a href="#">Don't you dare</a></li>
                <li><a href="#">Oh go ahead</a></li>
              </ul>
            </div>

          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix visible-sm"></div>

          <div class="about col-sm-12 col-md-6">
            <h3>About Us</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
            <p><a class="btn btn-default btn-xs pull-right" href="#">Learn more <span class="fa fa-arrow-circle-right"></span></a></p>
          </div>
        </div><!-- /.row -->

        <ul class="social">
          <li><a href="#" title="Twitter Profile"><span class="icon fa fa-twitter"></span></a></li>
          <li><a href="#" title="Facebook Page"><span class="icon fa fa-facebook"></span></a></li>
          <li><a href="#" title="LinkedIn Profile"><span class="icon fa fa-linkedin"></span></a></li>
          <li><a href="#" title="Google+ Profile"><span class="icon fa fa-google-plus"></span></a></li>
          <li><a href="#" title="GitHub Profile"><span class="icon fa fa-github-alt"></span></a></li>
        </ul>

        <p class="footer-brand"><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p>

      </div><!-- /.container -->
    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

    <!-- Holder.js for project development only -->
    <script src="js/vendor/holder.js"></script>

    <!-- Essential Plugins and Main JavaScript File -->
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

  </body>
</html>